<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
</head>

<body>

    <!-- data-*  这种方式的属性是自定义的，作用是储存数据 -->
    <div class="box-1" data-index="0" data-url="http://xxx.com/1.jpg" data-example-count="1000"
        data-example-price-old="11111" aaa1="hello world1" role="div1"></div>

    <div class="box-2" data-index="1" data-url="http://xxx.com/2.jpg" data-example-count="2000"
        data-example-price-old="1000" aaa1="hello world2" role="div2"></div>

    <p id="purchase">购物列表</p>
    <ul>
        <li class="goods" title="可购买">洗衣机</li>
        <li class="goods" title="可购买">电脑</li>
        <li class="goods" title="可购买">手机</li>
        <li class="goods" title="可购买">空调</li>
        <li class="goods">宇宙空间站</li>
        <li class="goods" title="可购买">汽车</li>
        <li class="goods">火箭</li>

    </ul>

    <p>123</p>

    <script>
        // 获取相关的标签
        var box1 = document.querySelector(".box-1");
        var box2 = document.querySelector(".box-2");

        // 展开dom对象
        console.dir(box1);

        // 获取储存自定义属性值的对象
        var data = box1.dataset;
        console.log(data);

        // 获取data相关属性
        console.log(data.index);// 0
        console.log(data.url);// http://xxx.com/1.jpg
        console.log(data.exampleCount);// 1000
        console.log(data.examplePriceOld);// 11111


        // 通过 getAttribute(属性)
        console.log(box1.getAttribute("aaa1")); // hello world1
        console.log(box1.getAttribute("role"));// div1
        console.log(box2.getAttribute("role")); // div2


        // 总结：
        // 自定义属性，可以记录当前dom拥有的数据

        var purchase = document.querySelector("#purchase");
        purchase.setAttribute("title", "a");
        console.log(purchase.title);

        var lis = document.querySelectorAll(".goods");
        lis.title = "b";
        console.log(lis.title);

        var p = document.getElementsByTagName("p");
        p.textContent = "很久很久以前...";
        console.log(p);
    </script>
</body>

</html>